<template>
	<view class="content">
		<view class="fixed">
			<view class="header-wrap">
				<view class="nav-wrap">
					<view class="left" style="float: left;font-size: 40rpx; width:30rpx; height:40rpx" @click="back()">
						<image src="../../static/back.png" mode=""></image>
					</view>
					<view class="types">
						配载单详情
					</view>
					
				</view>
		
			</view>
		</view>
		
		<view class="stowageStatu">
			<h5>当前配载单状态 <span v-if="shippingStatus">已完成进度：{{shippingStatus}}/5</span></h5>
			<view class="speedBox">
				<view class="tips tipsBg" v-if="!shippingStatus">
					{{ tipWords }}
				</view>
				<view class="tips" :style="{left: shippingLeft}" v-else>
					{{ tipWords }}
				</view>
				<view class="speed">
					<view class="progressBar"  :style="{width: progressConWith}">
						<view class="img" :style="{left: progressLeft}">
							
						</view>
					</view>
					<!-- <u-line-progress :blue="true" height="12" inactiveColor="#F4F4F4" :percentage="30" :showText="false"></u-line-progress> -->
				</view>
			</view>
			<view class="carInfo">
				<view class="car">
					<span class="">车牌号：</span>
					<Plate :plate="vehicleNo" :vehicleFlag ="info.vehicleFlag"></Plate>
				</view>
				<view class="userInfo">
					联系方式: <text :style="info.driverFlag == 0?'color:#F04848':''">{{ info.driverName}}｜{{info.driverTel}}</text> 
					<text class="called" v-if="info.driverFlag == 0"  :style="info.driverFlag == 0?'':''">未注册</text>
				</view>
			</view>
		</view>
		<view class="tabBox">
			<tabbar :tabItem="tabItem" :tabIndex="tabIndex" @tabClick="tabClick" textColor="#999"></tabbar>
			<view v-if="tabIndex == 0">
				<view class="tabCon">
					<h5>当前配载单状态</h5>
					<view class="tabUl">
						<view class="tabLi">
							配载单号： <span>{{ loadingOrderMap.billNo||'暂无数据' }}</span>
						</view>
						<view class="tabLi">
							创建时间： <span>{{ loadingOrderMap.crtTime||'暂无数据'}}</span>
						</view>
						<view class="tabLi">
							起运时间：<span>{{loadingOrderMap.startTime||'暂无数据'}}</span>
						</view>
						<view class="tabLi">
							到达时间：
							<span>{{ loadingOrderMap.arriveTime||'暂无数据'}}</span>
						</view>
						<view class="tabLi">
							完成时间：
							<span>{{ loadingOrderMap.finishTime||'暂无数据'}}</span>
							</view>
						<view class="tabLi">
							计划运输数量({{goodsMap.unit}})： <span>{{ loadingOrderMap.planShippingNum||'暂无数据' }}</span>
						</view>
						<view class="tabLi">
							实发数量({{goodsMap.unit}})： <span>{{ loadingOrderMap.shippingNum||'暂无数据' }}</span>
						</view>
						<view class="tabLi">
							实卸数量({{goodsMap.unit}})： <span>{{ loadingOrderMap.receiptedNum||'暂无数据' }}</span>
						</view>
						<view class="tabLi" v-if="(shippingStatus == 4 || shippingStatus == 5 )&& loadingOrderMap.shippingNum && loadingOrderMap.receiptedNum">
							实际货差({{goodsMap.unit}})： <span>
							{{(Number(loadingOrderMap.receiptedNum) - Number(loadingOrderMap.shippingNum)).toFixed(2)}}
								
								<!-- {{loadingOrderMap.shippingNum}} -->
								</span>
						</view>
						<view class="tabLi">
							实际货损率： <span>{{ loadingOrderMap.realDamageRate == null? '暂无数据':loadingOrderMap.realDamageRate.toFixed(2) }} {{loadingOrderMap.realDamageRate != null?'‰':''}}</span>
						</view>
					</view>
				</view>
				<view class="tabCon">
					<h5>运费信息</h5>
					<view class="tabUl">
						<view class="tabLi">
							应付运费(元)： <span>{{ freightMap.copeTotal!= null?freightMap.copeTotal:'暂无数据' }}</span>
						</view>
						<view class="tabLi">
							实付运费(元)： <span>{{ freightMap.realPayTotal!= null?freightMap.realPayTotal:'暂无数据'}}</span>
						</view>
						<view class="tabLi">
							回单付(元)： <span>{{ freightMap.receiptTotal!= null?freightMap.receiptTotal:'暂无数据' }}</span>
						</view>
						<view class="tabLi">
							回单付增扣(元)： <span>{{ freightMap.receiptAttrTotal!= null? freightMap.receiptAttrTotal:'暂无数据'}}</span>
						</view>
						<view class="tabLi">
							到付(元)： <span>{{ freightMap.prepayTotal != null?freightMap.prepayTotal:'暂无数据' }}</span>
						</view>
						<view class="tabLi">
							到付增扣(元)： <span>{{ freightMap.prepayAttrTotal != null ?freightMap.prepayAttrTotal:'暂无数据' }}</span>
						</view>
					</view>
				</view>
				<view class="tabCon">
					<h5>备注</h5>
					<view>
						{{ freightMap.remark }}
					</view>
				</view>
			</view>
			<view v-if="tabIndex == 1">
				<view class="tabCon">
					<h5>运单信息</h5>
					<view class="tabUl">
						<view class="tabLi">
							项目： <span>{{ wayBillMap.itemName||'暂无数据' }}</span>
						</view>
						<view class="tabLi">
							运单号： <span>{{ wayBillMap.billNo ||'暂无数据'}}</span>
						</view>
						<view class="tabLi">
							网络承运商： <span>{{ wayBillMap.platformCoName||'暂无数据' }}</span>
						</view>
						<view class="tabLi">
							承运商： <span>{{ wayBillMap.carrierName ||'暂无数据'}}</span>
						</view>
						<view class="tabLi">
							运单模式： <span>{{ !wayBillMap.waybillMode?'暂无数据':wayBillMap.waybillMode == 1?'指派模式':'抢单扫码'}}</span>
						</view>
						<view class="tabLi">
							业务类型： <span>{{ getBizType(wayBillMap.bizType) ||'暂无数据'}}</span>
						</view>
						<view class="tabLi">
							计划运输时间： <span>{{ wayBillMap.planBeginTime||'暂无数据' }}</span>
						</view>
						<view class="tabLi">
							计划送达时间： <span>{{ wayBillMap.planEndTime ||'暂无数据'}}</span>
						</view>
						<view class="tabLi">
							计划运输数量： <span>{{ wayBillMap.planShippingNum ||'暂无数据'}}</span>
						</view>
						<!-- <view class="tabLi">
							实发数量： <span>{{ wayBillMap.shippedNum||'暂无数据' }}</span>
						</view>
						<view class="tabLi">
							实卸数量： <span>{{ wayBillMap.receiptedNum||'暂无数据' }}</span>
						</view>
						<view class="tabLi">
							实际货差： <span>{{ wayBillMap.realDamageRate||'暂无数据' }}</span>
						</view>
						<view class="tabLi">
							实际货损率： <span>{{ wayBillMap.damageRate||'暂无数据'||'暂无数据' }}</span>
						</view> -->
					</view>
				</view>
				<view class="tabCon">
					<h5>运费信息</h5>
					<view class="tabUl">
						<view class="tabLi">
							应付运费： <span>{{ wayBillMap.copeTotal||'暂无数据' }}</span>
						</view>
						<view class="tabLi">
							实付运费： <span>{{ wayBillMap.realPayTotal ||'暂无数据'}}</span>
						</view>
					</view>
				</view>
			</view>
			<view v-if="tabIndex == 2">
				<view class="tabCon">
					<h5>货物信息</h5>
					<view class="tabUl">
						<view class="tabLi">
							货物名称： <span>{{ goodsMap.goodsName }}</span>
						</view>
						<view class="tabLi">
							货物类型： <span>{{getGoodsType(goodsMap.goodsType)  }}</span>
						</view>
						<view class="tabLi">
							计量单位： <span>{{ goodsMap.unit }}</span>
						</view>
						<view class="tabLi">
							计划运输量： <span>{{ goodsMap.planShippingNum }}</span>
						</view>
						<view class="tabLi">
							运输单价： <span>{{ goodsMap.shippingPrice }}</span>
						</view>
						<view class="tabLi" style="height: auto;overflow: hidden">
							货损指标： 
							<span style="width: 70%;">
							{{loadingOrderMap.damageRate || loadingOrderMap.briefIntroduction }}
							{{ loadingOrderMap.damageRate?'‰':'' }}
							</span>
						</view>
					</view>
				</view>
				<view class="tabCon">
					<h5>托运人信息</h5>
					<view class="tabUl">
						<view class="tabLi">
							托运人单位： <span>{{ shippingUserMap.shippingUserUnit }}</span>
						</view>
						<view class="tabLi">
							托运人： <span>{{ shippingUserMap.shippingUserName }}</span>
						</view>
						<view class="tabLi">
							手机号： <span>{{ shippingUserMap.shippingUserTel }}</span>
						</view>
						<view class="tabLi">
							取货城市： <span>{{ shippingUserMap.shippingCity }}</span>
						</view>
						<view class="tabLi">
							详细地址： <span>{{ shippingUserMap.shippingAddress }}</span>
						</view>
					</view>
				</view>
				<view class="tabCon">
					<h5>收货人信息</h5>
					<view class="tabUl">
						<view class="tabLi">
							收货人单位： <span>{{ receiptUserMap.receiptUserUnit }}</span>
						</view>
						<view class="tabLi">
							收货人： <span>{{ receiptUserMap.receiptUserName }}</span>
						</view>
						<view class="tabLi">
							手机号： <span>{{ receiptUserMap.receiptUserTel }}</span>
						</view>
						<view class="tabLi">
							收货城市： <span>{{ receiptUserMap.receiptCity }}</span>
						</view>
						<view class="tabLi">
							详细地址： <span>{{ receiptUserMap.receiptAddress }}</span>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="btnBox" v-if="tabIndex == 0 && shippingStatus == 0 && info.billStatus != 5 && info.billStatus != 6" >
			<view class="btn" @click="jump()">
				修改运力
			</view>
		</view>
	</view>
</template>

<script>
	import tabbar from '@/components/tabBox/tab.vue'
	import Plate from '@/components/plate/plate.vue'
	import {
		loadingOrderInfo,queryDicKey
	} from '@/config/api/app.js'
	import Cache from '@/utils/cache'
	export default {
		components:{
		    tabbar,
			Plate
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.getQueryDicKey()
			this.getDetails(option)
			this.loadingOrderId = option.loadingOrderId
		},
		data() {
		    return {
		        tabItem:['配载单信息','运单信息','货物信息'],
		        tabIndex:0,
				progressConWith: '20%',
				progressLeft:'2rpx',
				info:{},//配载单详情
				loadingOrderMap:{}, //配载单tab信息
				freightMap:{},//运费信息
				goodsMap:{},//货物信息
				wayBillMap:{},//运单信息
				shippingUserMap:{},//托运人信息
				receiptUserMap: {},//收货人信息
				shippingStatus: 0 , //进度
				tipWords:'',
				shippingLeft: 0, //提示语
				vehicleNo :'',
				waybillId: '', //运单id
				loadingOrderId: '', //配载单id
				listActivity:{}, //业务类型，
				listGoodsType: {}
		    }
		},
		methods: {
			onBackPress(e) {
				Cache.set("selInfo", 2);
				 uni.redirectTo({
				 	url: '/pages/home/home'
				 });
				// let pages = getCurrentPages()
				// let page = pages[pages.length - 1];
				// let currentPages = page.$getAppWebview()
				// currentPages.close()
				return false
			},
			getDetails(data){
				loadingOrderInfo(data).then(res => {
					
					if(res.code == 0){
						this.info = res.data
						this.waybillId = res.data.waybillId
						this.loadingOrderMap = res.data.loadingOrderMap
						this.vehicleNo = this.info.vehicleNo
						this.freightMap = res.data.freightMap
						this.goodsMap = res.data.goodsMap
						this.wayBillMap = res.data.wayBillMap
						this.shippingUserMap = res.data.shippingUserMap
						this.receiptUserMap = res.data.receiptUserMap
						if(this.info.billStatus == 1){
							this.shippingStatus = 0
							this.tipWords = '等待接单'
							// return false
						}else if(this.info.billStatus == 2){
							// 未起运 1  运输中 2 已送达 3 已回单 4
							// 已完成：回单已确认 5
							if(this.info.shippingStatus == 1){
								this.shippingStatus = 1
								this.tipWords = '未起运'
							}else if(this.info.shippingStatus == 2){
								this.shippingStatus = 2
								this.tipWords = '运输中'
							}else if(this.info.shippingStatus == 3){
								this.shippingStatus = 3
								this.tipWords = '已送达'
							}else if(this.info.shippingStatus == 4){
								this.shippingStatus = 4
								this.tipWords = '已回单'
							}else if(this.info.shippingStatus == 5){
								this.shippingStatus = 5
								this.tipWords = '已完成'
							}
						}else if(this.info.billStatus == 3){
							this.shippingStatus = 5
							this.tipWords = '已完成'
						}else if(this.info.billStatus == 5){
							this.shippingStatus = 0
							this.tipWords = '取消申请中'
						}else if(this.info.billStatus == 6){
							this.shippingStatus = 0
							this.tipWords = '已取消'
						}
						this.progressConWith = this.shippingStatus * 20 +'%'
						// console.log(this.progressLeft,this.progressConWith)
						this.progressLeft = this.shippingStatus * 0.2 * 692 +'rpx'
						this.shippingLeft = (this.shippingStatus * 0.2 * 692 - 100)+'rpx'
						// console.log(this.progressLeft)
					}
				})
			},
		    tabClick(e){
		        this.tabIndex = e
				// console.log(`当前切换下标是${this.tabIndex}`)
		    },
			jump(){
				uni.redirectTo({					
					url: '/pages/waybill/selQRcode?loadingOrderId=' + this.loadingOrderId + '&wayBillId=' + this.waybillId 
				});
			},
			getQueryDicKey() {
				let arr = [
					"BIZ_TYPE",
					"CARGO_TYPE",
					"PRC_MODE",
					"WAYBILL_MODE",
					"WAYBILL_STATUS",
					"UNIT"
				]
				queryDicKey(arr).then(res => {
					if (res.code == 0) {
						this.listActivity = res.data.BIZ_TYPE
						this.listGoodsType = res.data.CARGO_TYPE
						this.unitList = Object.values(res.data.UNIT)
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getGoodsType(value){
				console.log(this.listGoodsType)
				for(let key in this.listGoodsType){
				    if(value == key) return this.listGoodsType[key].dicName
				}
			},
			getBizType(value){
				for(let key in this.listActivity){
				    if(value == key) return this.listActivity[key].dicName
			
				}
			},
			back() {
				Cache.set("selInfo", 2);
				 uni.redirectTo({
				 	url: '/pages/home/home'
				 });
			},
		}
	}
</script>
<style lang="less">
	*{
		margin:0 ;
		padding: 0;
		box-sizing: border-box;
	}
	.content{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #FAFAFA;
		padding: 140rpx 0 60rpx;
		.fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10079;
		}
		
		.header-wrap {
		
		
		
			width: 100vw;
			box-sizing: border-box;
			padding: 100rpx 24rpx 16rpx;
			background: #fff;
		
			.nav-wrap {
				position: relative;
				// align-items: center;
				justify-content: space-between;
				text-align: center;
				.left{
					position: absolute;
					left: 0;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.patternState{
					position: absolute;
					right: 0;
					top: 0;
				}
				text {
					position: absolute;
					right: 0;
					min-width: 30rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
		.stowageStatu{
			width: 100%;
			height: 284rpx;
			background: #FFFFFF;
			margin-top: 14rpx;
			backdrop-filter: blur(20rpx);
			padding-top: 28rpx;
			h5{
				height: 36rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 36rpx;
				border-left: 8rpx solid #003E81;
				padding-left: 20rpx;
				span{
					float: right;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-right: 28rpx;
				}
			}
			.speedBox{
				padding: 100rpx 28rpx 40rpx;
				position: relative;
				.tips{
					background: url('@/static/waybIll/tips.png') no-repeat;
					padding: 10rpx 20rpx;
					height: 70rpx;
					background-size: 100% 100%;
					position: absolute;
					top: 22rpx;
					left: 50rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 34rpx;
					text-align: center;
				}
				.tipsBg{
					background: url('@/static/tipsBg.png') no-repeat;
					background-size: 100% 100%;
					left: 50rpx;
				}
				.speed{
					width: 692rpx;
					height: 22rpx;
					background: #F4F4F4;
					border-radius: 10rpx;
					.progressBar{
						border-radius: 10rpx;
						height: 22rpx;
						background: linear-gradient(-90deg,  #00468C,#a1c1e0);
						position: relative;
						.img{
							height: 40rpx;
							width: 40rpx;
							background: linear-gradient(-90deg,  #00468C,#a1c1e0);
							border-radius: 50%;
							position: absolute;
							top: -9rpx;
							margin-left: -20rpx
						}
					};
				}
			}
			.carInfo{
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				padding: 0 28rpx;
				height: 40rpx;
				line-height: 40rpx;
				.car{
					float: left;
					display: flex;
					// .carNum{
					// 	// width: 132rpx;
					// 	background: #FFFFFF;
					// 	display: flex;
					// 	line-height: 34rpx;
					// 	// border: 2rpx solid #003E81;
					// 	view{
					// 		width: 40rpx;
					// 		height: 38rpx;
					// 		background: #003E81;
					// 		border-radius: 4rpx 0 0 4rpx ;
					// 		text-align: center;
					// 		margin-right: 0;
					// 		color: #FFFFFF;
					// 	}
					// 	span{
					// 		font-size: 20rpx;
					// 		zoom: 0.9;
					// 	}
					// 	.carNumber{
					// 		border: 2rpx solid #003E81;
					// 		padding: 0 18rpx;
							
					// 	}
					// }
				}
				
				.userInfo{
					float: right;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}
			}
		}
		.tabBox{
			background: #FFFFFF;
			margin-top: 14rpx;
			padding-bottom: 120rpx;
			.tabCon{
				background: #FFFFFF;
				border-bottom: 14rpx solid #FAFAFA;
				.tabUl{
					.tabLi{
						height: 68rpx;
						line-height: 68rpx;
						padding: 0 28rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #888888;
						span{
							float: right;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 600;
							color: #333333;
						}
					}
					.tabLi.tabLi:nth-child(2n-1){
						background: #FBFBFB;
					}
				}
			}
			h5{
				height: 36rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 36rpx;
				border-left: 8rpx solid #003E81;
				padding-left: 14rpx;
				margin: 28rpx 0 20rpx;
			}
		}
		.btnBox{
			width: 100%;
			background: #FFFFFF;
			position: fixed;
			padding: 14rpx 32rpx 24rpx;
			bottom: 0;
			left: 0;
			.btn {
				color: #FFFFFF;
				border-radius: 6px;
				height: 80rpx;
				background: linear-gradient(to right, #4d83b9, #003E81);
				text-align: center;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
			}
		}
		.called {
			width: 80rpx;
			text-align: center;
			height: 40rpx;
			border-radius: 4rpx;
			display: inline-block;
			background:rgba(255, 212, 212, 1);
			color:#F04848;
			text {
				zoom: 0.9
			}
		}
	}
</style>